<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>addEventListener</title>
        <style>
            .wrapper { border: 1px solid blue; }
            .wrapper>button { margin: 10px; }
        </style>
    </head>
    <body>
        <h1>addEventListener</h1>

        <div class="wrapper">
            <button type="button" class="first">addEventListener(type, listener, useCapture)</button>
            <button type="button" class="second">addEventListener(type, listener, options)</button>
        </div>

        <script>
            (()=>{
                const firstButton = document.querySelector( '.first' );
                // 指定事件类型(也称作事件名称)
                const type = 'click';
                // 指定事件监听器
                // 监听器可以是任意含有handleEvent方法的对象，也可以是一个函数
                const listener = {
                    handleEvent(event){
                        console.log( event );
                        console.log( 'type: ', event.type );
                        console.log( 'target: ', event.target );
                        console.log( 'current target: ', event.currentTarget );
                    }
                }
                // 指示是否在事件捕获阶段处理事件
                const useCapture = false; // true 表示在事件捕获阶段处理
                // 为`事件目标`绑定`指定类型`的`事件监听器`，并明确在哪个阶段处理
                firstButton.addEventListener(type, listener, useCapture);

                const secondButton = document.querySelector( '.second' );

                const options = {
                    capture: false, // 与之前的 useCapture 含义相同
                    once: true, // 若为true则表示事件监听器仅能执行一次(即以此执行后自动删除监听器)
                }
                secondButton.addEventListener(type,listener, options );
            })();
        </script>

        <p>请在浏览器终端中查看运行结果</p>
    </body>
</html>